<script setup>
import { tool } from "../tool/index"
import { onMounted, ref } from "vue"
import { ElMessage } from 'element-plus'
// 获取文件选择对象，进行Ref绑定
const fileInputRef = ref(null)
const selectedImage = ref()
const imageUrl = ref()

function handleFileChange(event) {
  // 获取文件对象进行存储
  const file = event.target.files[0]
  const type = tool.fileApi.imageType(file)
  console.log(type)
  if(type.type == "err"){
    ElMessage({
      type:"warning",
      message:"文件格式有误，请检查大小:(< 5 MB) 及文件类型:(图片)"
    })
  }
  // 将文件对象转存
  selectedImage.value = file
  // 将文件对象转换为URL
  imageUrl.value = URL.createObjectURL(file)
}

const text = ref("0d65f10ff64f6bd5ad49587a3ac40595copy.png")
// const text1 = ref("1dee1ff7464a5c752e55ed5d3e50ac19 copy.jpeg")

// async function api(){
//   const response = await tool.fileApi.delete(text1.value)
//   console.log(response)
// }

async function update(){
  console.log(text.value)
  const response = await tool.fileApi.update(selectedImage.value,text.value)
  console.log(response)
}
</script>

<template>
   <!-- <el-input type="text" v-model="text1"  />
  <el-button @click="api()" >删除</el-button>  -->

  <input ref="fileInputRef" type="file" @change="handleFileChange($event)">
  旧文件名：<el-input type="text" v-model="text"  />
  <el-button @click="update()" >更新</el-button>
  <el-image :src="imageUrl" />
</template>

<style scoped>
</style>